<template>
  <common-modal
    ref="modalRef"
    v-bind="attrs"
    @sure="search"
    @cancel="handleCancel"
    @before-close="reset"
    @open="handleOpen"
    :showFooter="false"
  >
    <common-page-template
      v-bind="pageData"
      :columns="columns"
      :showHeader="false"
      
      @page-change="pageChange"
    >
      <template #search>
        <modal-search :agencyId="agencyId" @submit="handleSubmit" />
      </template>
    </common-page-template>
  </common-modal>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import { reactive, useAttrs, ref, onMounted, h } from "vue";
import commonModal from "@/components/commonModal.vue";
import useForm from "@/hooks/useForm";
import { RoleSave } from "@/apis/role";
import { ElMessage } from "element-plus";
import ModalSearch from "./search.vue";
import CommonOptionBtns from "@/components/commonOptionBtns.vue";
import { PageCombineAccount, AddCombine, delCombine } from "@/apis/agent";
import usePage from "@/hooks/usePage";
const { pageData, handleQuery, pageChange } = usePage(
  PageCombineAccount,
  "records"
);
const props = defineProps({
  agencyId: {
    type: [Number, String],
    default: ''
  }
})
const columns = [
  {
    prop: "mediaName",
    label: "媒体名称",
    width: 200,
    align: "center",
  },
  {
    prop: "accountName",
    label: "媒体账户",
    minWidth: 120,
    align: "center",
  },
  {
    label: "操作",
    width: 100,
    align: "center",
    render: (row, column, $index) => {
      const { isCombine }  = row
      return h(CommonOptionBtns, {
        btnList: [
          { 
            type: isCombine ? "danger" : "warning", 
            size: "small", 
            text: isCombine ? "取消关联" : "关联", 
            eventName: "del",
            prop: {
              title: `确认${isCombine ? "取消关联" : "关联"}该媒体?`
            }
          },
        ],
        onBtnClick: (eventName) => {
          if (eventName === "del") {
            // 编辑
            const optionApi = isCombine === 1 ? delCombine : AddCombine
            const params = {
              agencyId: props.agencyId,
              mediaAccountId: row.id
            }
            optionApi(params).then(() => {
              ElMessage({
                message: `${isCombine ? "取消关联" : "关联"}成功`,
                type: "success",
              });
              handleSubmit()
            })
          }
        },
      });
    },
  },
];
const handleSubmit = (formData = {}) => {
  pageData.formData = formData;
  Object.assign(pageData.formData, { ...formData, agencyId: props.agencyId })
  handleQuery();
};
onMounted(() => {
  handleQuery();
});
const optType = ref("add");
const curForm = ref("");
const showAddModal = ref(false);
const showModal = (type, forms = "") => {
  optType.value = type;
  showAddModal.value = true;
  curForm.value = forms;
};
const attrs = useAttrs();
const formData = reactive({
  name: "",
  tag: "",
  address: "",
  cookie: "",
  state: "1",
});
const modalRef = ref(null);
// 确定
const handleSure = async () => {
  await RoleSave({ ...formData });
  ElMessage.success({
    message: "操作成功",
    type: "success",
  });
  emits("success");
  handleCancel();
};
const { formRef, search, reset } = useForm(handleSure);
const rules = {
  name: [{ required: true, message: "请输入媒体名称" }],
  tag: [{ required: true, message: "请输入媒体标识" }],
  state: [{ required: true, message: "请选择状态" }],
};

// 取消 关闭弹窗
const handleCancel = () => {
  modalRef.value?.close();
};

// 确定
const emits = defineEmits(["success"]);

// 打开弹窗
const handleOpen = () => {
  handleSubmit()
};
</script>
